<template>
  <div class="tips flex items-center">
    <tips theme="outline" size="46" fill="#ed6d59" class="ml-6" />
    <div class="ml-1">
      <h3 class="tips__title">智能创意推荐</h3>
      <p class="tips__desc">基于您的关键词所属行业，已为您推荐以下创意。您可根据需要调整推广标题与内容</p>
    </div>
  </div>
  <a-row :gutter="10">
    <a-col :span="8" :key="i" v-for="(item, i) in useData">
      <a-card class="card">
        <p class="title text-base mb-3 ell-1">{{ item.title }}</p>
        <p class="content text-sm ell-3">
          {{ item.content }}
        </p>
        <div class="flex items-center justify-between">
          <div class="left flex">
            <div class="baixing"><span class="avatar">百</span>百姓网</div>
            <div class="tag ml-2">广告</div>
            <div class="tag ml-2">保障</div>
          </div>
          <div class="right">
            <a-button type="text" class="use" @click="emit('on-use', item)">应用该创意</a-button>
          </div>
        </div>
      </a-card>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup name="MaterialExample">
import { Tips } from '@icon-park/vue-next'

interface Data {
  title: string
  content: string
}
interface Emits {
  (e: 'on-use', v: Data): void
}

const useData: Data[] = [
  {
    title: '自动焊机就找上海铁煌，厂家直销，型号齐全',
    content:
      '公司主营便携式自动焊机、电焊机等，20年专业生产经验，累计服务200家大中型建筑建材企业，规格型号全，支持定制，价格透明合理，欢迎新老客户咨询。'
  },
  {
    title: '专业螺纹钢厂家，按需定做，价格透明',
    content:
      '上海昶容金届主要经管螺纹钢，镀锌方管，无缝方管，螺旋管等，专业技术团队，多年行业经验，产品难蚀不易锈，稳定性强，现在咨询有优惠！'
  },
  {
    title: '除生设备生产厂家，效率高，风量大，可定制',
    content:
      '上海缘威环保专业从事除尘设备的研发、生产和销售，模块化安装除尘效幸好，国处理风量大结构紧凑,約占地面积,密封性好故障率低,使用寿命长，经济效益好！'
  }
]

const emit = defineEmits<Emits>()
</script>

<style lang="scss" scoped>
.tips {
  background: #fdf3f1;
  width: 600px;
  height: 110px;
  border-radius: 5px;
  margin-bottom: 20px;

  &__title {
    font-size: 19px;
    color: #000;
    font-weight: bolder;
    margin-bottom: 0;
  }

  &__desc {
    font-size: 13px;
    color: #737171;
    margin-bottom: 0;
  }
}

.title {
  color: #508fe8;
}

.content {
  line-height: 1.7;
  font-size: 0.84rem;
  margin-bottom: 1.8rem;
}

.card {
  ::v-deep(.ant-card-body) {
    padding: 15px 13px;
  }
}

.baixing {
  color: #666;
  font-size: 0.85rem;
  display: flex;
  align-items: center;

  .avatar {
    color: #fff;
    background: #1f256f;
    font-size: 0.7rem;
    padding: 1px;
    line-height: 1rem;
    text-align: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    margin-right: 5px;
  }
}

.tag {
  color: #508fe8;
  font-size: 0.85rem;
}

.use {
  color: #ff4d4f;
  font-weight: bold;
  background: #fcf0ed;
  font-size: 0.85rem;
}
</style>
